<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%  
	String path = request.getContextPath();  
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>


<link rel="stylesheet" type="text/css" href="/bsc/static/common/bootstrap/js/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/bsc/static/common/bootstrap/js/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
<script src="/bsc/static/js/jquery-3.1.1.js"></script>
<script src="/bsc/static/common/bootstrap/js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>
<body>
	<form action="/bsc/qtselectBis"	method="post" class="form-inline" id="myform">
		<table border="0" cellspacing="0" cellpadding="10" width="100%">
			<tr>
				<td width="5%" align="right">项目编号：</td>
				<td width="10%">
				<div class="input-group input-group-sm"><input type="text" id="project_id"
					name="project_id" value="" class="form-control"  aria-describedby="sizing-addon3"/></div></td>
				<td width="5%" align="right">项目名称：</td>
				<td>
				<div class="input-group input-group-sm"><input type="text" id="project_name" name="project_name"
					value="" class="form-control" aria-describedby="sizing-addon3"/></div></td>
				<td width="5%" align="right">分类：</td>
				<td><select name="type_id" id="type_id" class="form-control">
						<option value="">全部</option>
						<c:forEach items="${listb }" var="type">
							<option value="${type.type_id }">${type.type_name }</option>
						</c:forEach>

				</select></td>
				<td width="5%" align="right">价格区间：</td>
				<td>
					<td><input type="text" id="zhi1" name="rmb_price1" placeholder="请选择最低价格" value="${rmb_price2 }" class="form-control"/></td>				
					<td><input type="button" id="jian1" value="-"/></td>	
					<td><input type="button" id="jia1" value="+"/></td>					
					<td>至</td>				
					<td><input type="text" id="zhi2" name="rmb_price2" value="${rmb_price2 }"  placeholder="请选择最高价格" class="form-control" /></td>	
					<td><input type="button" id="jian2" value="-"/>	</td>
					<td><input type="button" id="jia2" value="+"/></td>
				</td>
				<td  width=""  rowspan="2">&nbsp; &nbsp; &nbsp;
					<button class="btn btn-default btn-sm" type="submit">
						<span class="glyphicon glyphicon-search" aria-hidden="true">查询
					</button>
					<button type="reset" class="btn btn-default btn-sm">
						<span class="glyphicon glyphicon-repeat" aria-hidden="true">重置
						
					</button>

				</td>
			</tr>

		</table>
	</form>
<table data-toggle="table" class="table table-hover table-condensed">
		<tr>
			<td>护理项目图片</td>
			<td>项目编号</td>
			<td>项目名称</td>
			<td>人民币售价(元)</td>
			<td>颜值售价(个)</td>
			<td>标准手工费(元)</td>
			<td>活动手工费(元)</td>
			<td>服务时长(分钟)</td>
			<td>分类</td>
			<td>建立时间</td>
			<td></td>
		</tr>
		<c:forEach items="${qtlist }" var="project">
			<tr>
				<td>
					<div style="width:100px; height:100px; border-radius:50%; overflow:hidden;">
					<img width="100px" height="100px" src="/bsc${project.cover_photo}"/>
				</div>
				</td>
				<td>${project.project_id }</td>
				<td>${project.project_name }</td>
				<td>${project.rmb_price }</td>
				<td>${project.beauty_price }</td>
				<td>${project.manual_price }</td>
				<td>${project.active_price }</td>
				<td>${project.server_time }</td>
				<td>${project.type_name }</td>
				<td>${project.create_time }</td>
				<td>
						
					<button type="button"   onclick="qtselectById(${project.project_id})">查询详情</button>
				</td>

			</tr>
		</c:forEach>
	</table>
	
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <table border="0" cellspacing="0" cellpadding="10" width="80%"
			class="table ">
        	<tr>
        		<td>护理项目图片</td>
        		<td><div style="width:100px; height:100px; border-radius:50%; overflow:hidden;">
        		<img width="100px" height="100px"  src="" id="cover_photo"/>
        		</div></td>
        	</tr>
        	<tr>
        		<td>项目名称</td>
        		<td>
        			<input type="text" id="show_project_name" name="project_name"/>
        		</td>
        	</tr>
        	<tr>
        		<td>护理价格</td>
        		<td>
        			<input type="text" id="rmb_price" name="rmb_price"/>元 或
        			<input type="text" id="beauty_price" name="beauty_price"/>个颜值
        		</td>
        	</tr>
        	<tr>
        		<td>服务时间</td>
        		<td>
        		 <input type="text" id="server_time" name="server_time"/>分钟
        		</td>
        	</tr>
        	<tr>
        		<td>内容描述</td>
        		<td>
        			<textarea class="form-control" rows="5" cols="5" name="content" id="content">
        			
        			</textarea>
        		</td>
        	</tr>
        	
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>
<script type="text/javascript">
function qtselectById(id){
	//模态
	$.ajax({
		type:"post",
		url:"<%=basePath%>qtselectById",
		data:{'project_id':id},
		dataType:"json",
		success:function(msg){
			$("#show_project_name").val(msg.project_name);
			$("#cover_photo").attr("src","/bsc"+msg.cover_photo);
			$("#rmb_price").val(msg.rmb_price);
			$("#beauty_price").val(msg.beauty_price);
			$("#server_time").val(msg.server_time);
			$("#content").val(msg.content);
		}
	})
	$("#myModal").modal("show");
	
}



var zhi1 = null;

$("#jian1").on("click",function(){
	if(zhi1>10){
		zhi1 = zhi1 - 10;
	}
	$("#zhi1").val(zhi1);
});

$("#jia1").on("click",function(){
	
		zhi1 = zhi1 + 10;
	
	$("#zhi1").val(zhi1);
});

var zhi2 = null;
//$("#zhi2").val(zhi2);
$("#jian2").on("click",function(){
	if(zhi2>10){
		zhi2 = zhi2 - 10;
	}
	$("#zhi2").val(zhi2);
});

$("#jia2").on("click",function(){
	
		zhi2 = zhi2 + 10;
	
	$("#zhi2").val(zhi2);
});

</script>